<template>
  <div class="box1">
   <h1>这是头部内容,count值{{count}}</h1>
    <h2>获取电影的长度是{{movieList.length}}</h2>
    <button @click="addCount">累加</button>
    <button @click="addCountN({n:4})">累加n</button>
    <button @click="addCountWait">延迟累加</button>
    <button @click="addCountNWait({n:2})">延迟累加n</button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
    name:'Header',
    computed:{
      ...mapState('count',['count',"movieList"])
    },

    //绑定的事件书写methods中
    methods: {
      ...mapMutations('count',['addCount','addCountN']),

      //异步请求的事件
      ...mapActions('count',['addCountNWait','addCountWait'])
    },
}
</script>

<style>
.box1{
  text-align: center;
  background-color: rgb(166, 237, 175);
}
</style>